<template>
	<view>
		<view class="container" :style="{'padding-bottom': `${52+inputBottom}px`}">
			<view class="content" @touchstart="hideDrawer">
				<z-paging :show-default-loading-more-text="false" ref="paging" class="msg-list" :style="isShowKeyBoard ? {bottom: (60+inputBottom)+'px'}:{bottom:'60px'}" v-model="msgList" :auto="false" @refresherTouchend="queryList" :show-loading-more-no-more-view="false" :safe-area-inset-bottom="true">
					<template #top>
						<view class="header">
							<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
							<!-- #ifndef H5 -->
							<view class="fillBox" :style="{height:$u.sys().statusBarHeight+'px'}"></view>
							<!-- #endif -->
							<view class="nav-box" v-if="toUserInfo">
								<view class="nav-left">
									<!-- #ifndef H5 -->
									<image src="../../static/message/arrow-left.png" class="arrow-left" @click="navigatorBack"></image>
									<!-- #endif -->
									<view class="user-box">
										<image :src="toUserInfo.avatar" class="user-avatar" mode="aspectFill" @click="showUser=true">
										</image>
										<view class="user-info">
											<view class="name">
												<text>{{toUserInfo.nickname}}</text>
											</view>
											<view class="detail" v-if="to_user_id != 3">
												<text style="color: #F169F6;">
													<text style="margin-right: 10rpx;" v-if="toUserInfo.distance">{{toUserInfo.distance}}km |</text>
												</text>
												<text>
													{{toUserInfo.city}} | {{toUserInfo.age}}岁 </text>
											</view>
										</view>
									</view>
								</view>
								<view class="nav-right">
									<view class="unlock" @click="lookWechat" v-if="to_user_id!=3&&userInfo&&userInfo.gender==1">
										<image src="../../static/common/icon_wx.png" class="icon_wx"></image> 查看
									</view>
									<image src="../../static/common/icon_more.png" class="more" @click="showAction=true" v-if="to_user_id!=3"></image>
								</view>
							</view>
							<view class="waring-text" @click="$Tips('/pages/richText/richText?biaoshi=preventing_fraud')" v-if="to_user_id!=3"> 请勿轻易转账，警惕裸聊诈骗，涉嫌色情等违禁内容请举报 <u-icon name="arrow-right" size="14" color="#F169F6"></u-icon>
							</view>
						</view>
					</template>
					<!-- <scroll-view  :scroll-y="true" :scroll-top="scrollTop"> -->
					<view class="content" style="padding: 0 20rpx;width: calc(100% - 40rpx);">
						<view class="row" v-for="(row,index) in msgList" :key="index">
							<!-- 系统消息 -->
							<view>
								<view class="system">
									<view class="text">{{row.datetime}}</view>
								</view>
							</view>
							<!-- 用户消息 -->
							<view v-for="(item,msgIndex) in row.data" :key="msgIndex" :id="'msg'+item.id" style="margin-top: 20rpx;">
								<!-- 自己发出的消息 -->
								<view class="my" v-if="item.sender=='me'">
									<!-- 左-消息 -->
									<view class="left">
										<!-- 文字消息 -->
										<view class="bubble" v-if="item.msg_type==1">
											<rich-text :nodes="item.message"></rich-text>
										</view>
										<!-- 语言消息 -->
										<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
										<view class="length">
											{{row.msg.content.length}}
										</view>
										<view class="icon my-voice"></view>
									</view> -->
										<!-- 图片消息 -->
										<view v-if="item.msg_type==2" class="bubble" @tap="showPic(item.message)">
											<image :src="item.message" mode="aspectFill" class="image"></image>
										</view>
										<!-- 卡片消息 -->
										<view class="card-box" v-if="item.msg_type==3">
											<view class="card-top">
												<view class="top-left">
													<image src="../../static/common/icon_wx.png" class="wechat"></image>
													<view>微信</view>
												</view>
											</view>
											<view class="card-bottom">
												<view class="bottom-right">
													{{item.message}}
												</view>
											</view>
										</view>
									</view>
									<!-- 右-头像 -->
									<view class="right" v-if="userInfo">
										<image :src="$OssUrl(userInfo.avatar)" mode="aspectFill"></image>
									</view>
								</view>
								<!-- 别人发出的消息 -->
								<view class="other" v-if="item.sender=='you'&&toUserInfo">
									<!-- 左-头像 -->
									<view class="left">
										<image :src="toUserInfo.avatar" @click="showUser=true" mode="aspectFill"></image>
									</view>
									<!-- 右-用户名称-时间-消息 -->
									<view class="right">
										<view class="username">
											<view class="name">{{toUserInfo.nickname}}</view>
											<!--<view class="time">{{item.createtime}}</view>-->
										</view>
										<!-- 文字消息 -->
										<view class="bubble" v-if="item.msg_type==1">
											<rich-text :nodes="item.message"></rich-text>
										</view>
										<!-- 图片消息 -->
										<view v-if="item.msg_type==2" class="bubble" @tap="showPic(item.message)">
											<image :src="item.message" mode="aspectFill" class="image"></image>
										</view>
										<!-- 卡片消息 -->
										<view class="card-box" v-if="item.msg_type==3">
											<view class="card-top">
												<view class="top-left">
													<image src="../../static/common/icon_wx.png" class="wechat"></image>
													<view>微信</view>
												</view>
												<view class="top-right" v-if="!toUserInfo.is_unlock">解锁</view>
											</view>
											<view class="card-bottom">
												<image src="../../static/HM-chat/suo.png" class="bottom-left" v-if="!toUserInfo.is_unlock">
												</image>
												<view class="bottom-right" v-if="!toUserInfo.is_unlock" @click="lookWechat">解锁后查看</view>
												<view class="bottom-right" v-if="toUserInfo.is_unlock">{{item.message}}</view>
											</view>
										</view>
										<!-- 语音消息 -->
										<!-- <view v-if="row.msg.type=='voice'" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgid == row.msg.id?'play':''">
										<view class="icon other-voice"></view>
										<view class="length">
											{{row.msg.content.length}}
										</view>
									</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
				</z-paging>
			</view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" style="position: fixed;" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="chooseImage">
						<image src="../../static/HM-chat/xiangce1.png" class="icon"></image>
					</view>
					<view class="box" @tap="camera">
						<image src="../../static/HM-chat/paizhao1.png" class="icon"></image>
					</view>
					<view class="box" @tap="chooseCard" v-if="to_user_id!=3&&userInfo&&userInfo.gender==2">
						<image src="../../static/HM-chat/kapian.png" class="icon"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="bottom-textarea input-box" :style="isShowKeyBoard ? {bottom: inputBottom+'px'}:{}" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''" style="align-items: center;">
					<view class="textarea-container">
						<textarea v-model="textMsg" :maxlength="-1" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="10" :fixed="true" :adjust-position="false" @focus="focusTextarea" @blur="blurTextarea" />
					</view>
					<view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" style="margin-right: 32rpx;" :class="isVoice?'hidden':''" @tap="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<view class="black-input" v-if="toUserInfo&&toUserInfo.is_black"> 您已经被对方拉黑 </view>
		<!-- 录音UI效果 -->
		<view class="record" style="z-index: 1000;" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
		<unLockPopup ref="lockRef" :show="showUnLock" @close="showUnLock=false" @success="unLockSuccess" :to_user_id="to_user_id">
		</unLockPopup>
		<wechatPopup :show="showWechat" @close="showWechat=false" :userWechat="userWechat"></wechatPopup>
		<u-action-sheet :actions="actionList" :show="showAction" @select="selectAction" cancelText="取消" @close="showAction=false"></u-action-sheet>
		<userPopup ref="userRef" :show="showUser" @close="showUser=false" @followSuccess="followSuccess" :user_id="to_user_id">
		</userPopup>
		<authentication :show="showAuth" @close="showAuth=false" @success="authSuccess"></authentication>
		<u-popup :show="showImprove" round="24rpx" mode="center" :safeAreaInsetBottom="false">
			<view class="contentBox">
				<!-- <image class="popup-close" src="../../static/common/icon_close.png" @click="cancelInfo" /> -->
				<image src="../../static/common/icon_improve.png" class="popup-image"></image>
				<view class="popup-title">未填写微信信息</view>
				<view class="popup-tips"> 前往补全基础信息，可以提高认证通过率和更多曝光哦~ </view>
				<view class="button-group">
					<view class="button1" @click="completeInfo"> 前往补全资料 </view>
					<view class="popup-tips" @click="showImprove= false">下次再说</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import unLockPopup from '@/components/UnLockPopup.vue';
	import wechatPopup from '@/components/WeChatPopup.vue';
	import WebSocketClass from '@/utils/websocket.js';
	import authentication from '@/components/Authentication.vue';
	import userPopup from '@/components/UserPopup.vue';
	import {
		HTTP_WSS_URL
	} from '@/config/app';
	const app = getApp();
	export default {
		data() {
			return {
				scrollTop: 1000,
				inputBottom: 0,
				pageBg: '/static/common/page_bg2.png',
				chartConfig: null,
				to_user_id: null,
				session_id: null,
				toUserInfo: null, //用户信息
				userInfo: null, //当前用户信息
				showUnLock: false,
				showWechat: false,
				userWechat: null, //微信信息
				showAction: false,
				showAuth: false,
				showUser: false,
				showImprove: false,
				actionList: [{
					name: '关注',
				}, {
					name: '拉黑',
				}, {
					name: '举报', //开启后文字不显示
					color: '#F169F6',
				}],
				//文字消息
				textMsg: '',
				msgList: [],
				msgInfo: null,
				msgImgList: [],
				myuid: 0,
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				isShowKeyBoard: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				emojiList: [
					[{
						"url": "100.gif",
						alt: "[微笑]"
					}, {
						"url": "101.gif",
						alt: "[伤心]"
					}, {
						"url": "102.gif",
						alt: "[美女]"
					}, {
						"url": "103.gif",
						alt: "[发呆]"
					}, {
						"url": "104.gif",
						alt: "[墨镜]"
					}, {
						"url": "105.gif",
						alt: "[哭]"
					}, {
						"url": "106.gif",
						alt: "[羞]"
					}, {
						"url": "107.gif",
						alt: "[哑]"
					}, {
						"url": "108.gif",
						alt: "[睡]"
					}, {
						"url": "109.gif",
						alt: "[哭]"
					}, {
						"url": "110.gif",
						alt: "[囧]"
					}, {
						"url": "111.gif",
						alt: "[怒]"
					}, {
						"url": "112.gif",
						alt: "[调皮]"
					}, {
						"url": "113.gif",
						alt: "[笑]"
					}, {
						"url": "114.gif",
						alt: "[惊讶]"
					}, {
						"url": "115.gif",
						alt: "[难过]"
					}, {
						"url": "116.gif",
						alt: "[酷]"
					}, {
						"url": "117.gif",
						alt: "[汗]"
					}, {
						"url": "118.gif",
						alt: "[抓狂]"
					}, {
						"url": "119.gif",
						alt: "[吐]"
					}, {
						"url": "120.gif",
						alt: "[笑]"
					}, {
						"url": "121.gif",
						alt: "[快乐]"
					}, {
						"url": "122.gif",
						alt: "[奇]"
					}, {
						"url": "123.gif",
						alt: "[傲]"
					}, ],
					[{
						"url": "124.gif",
						alt: "[饿]"
					}, {
						"url": "125.gif",
						alt: "[累]"
					}, {
						"url": "126.gif",
						alt: "[吓]"
					}, {
						"url": "127.gif",
						alt: "[汗]"
					}, {
						"url": "128.gif",
						alt: "[高兴]"
					}, {
						"url": "129.gif",
						alt: "[闲]"
					}, {
						"url": "130.gif",
						alt: "[努力]"
					}, {
						"url": "131.gif",
						alt: "[骂]"
					}, {
						"url": "132.gif",
						alt: "[疑问]"
					}, {
						"url": "133.gif",
						alt: "[秘密]"
					}, {
						"url": "134.gif",
						alt: "[乱]"
					}, {
						"url": "135.gif",
						alt: "[疯]"
					}, {
						"url": "136.gif",
						alt: "[哀]"
					}, {
						"url": "137.gif",
						alt: "[鬼]"
					}, {
						"url": "138.gif",
						alt: "[打击]"
					}, {
						"url": "139.gif",
						alt: "[bye]"
					}, {
						"url": "140.gif",
						alt: "[汗]"
					}, {
						"url": "141.gif",
						alt: "[抠]"
					}, {
						"url": "142.gif",
						alt: "[鼓掌]"
					}, {
						"url": "143.gif",
						alt: "[糟糕]"
					}, {
						"url": "144.gif",
						alt: "[恶搞]"
					}, {
						"url": "145.gif",
						alt: "[什么]"
					}, {
						"url": "146.gif",
						alt: "[什么]"
					}, {
						"url": "147.gif",
						alt: "[累]"
					}, ],
					[{
						"url": "148.gif",
						alt: "[看]"
					}, {
						"url": "149.gif",
						alt: "[难过]"
					}, {
						"url": "150.gif",
						alt: "[难过]"
					}, {
						"url": "151.gif",
						alt: "[坏]"
					}, {
						"url": "152.gif",
						alt: "[亲]"
					}, {
						"url": "153.gif",
						alt: "[吓]"
					}, {
						"url": "154.gif",
						alt: "[可怜]"
					}, {
						"url": "155.gif",
						alt: "[刀]"
					}, {
						"url": "156.gif",
						alt: "[水果]"
					}, {
						"url": "157.gif",
						alt: "[酒]"
					}, {
						"url": "158.gif",
						alt: "[篮球]"
					}, {
						"url": "159.gif",
						alt: "[乒乓]"
					}, {
						"url": "160.gif",
						alt: "[咖啡]"
					}, {
						"url": "161.gif",
						alt: "[美食]"
					}, {
						"url": "162.gif",
						alt: "[动物]"
					}, {
						"url": "163.gif",
						alt: "[鲜花]"
					}, {
						"url": "164.gif",
						alt: "[枯]"
					}, {
						"url": "165.gif",
						alt: "[唇]"
					}, {
						"url": "166.gif",
						alt: "[爱]"
					}, {
						"url": "167.gif",
						alt: "[分手]"
					}, {
						"url": "168.gif",
						alt: "[生日]"
					}, {
						"url": "169.gif",
						alt: "[电]"
					}, {
						"url": "170.gif",
						alt: "[炸弹]"
					}, {
						"url": "171.gif",
						alt: "[刀子]"
					}, ],
					[{
						"url": "172.gif",
						alt: "[足球]"
					}, {
						"url": "173.gif",
						alt: "[瓢虫]"
					}, {
						"url": "174.gif",
						alt: "[翔]"
					}, {
						"url": "175.gif",
						alt: "[月亮]"
					}, {
						"url": "176.gif",
						alt: "[太阳]"
					}, {
						"url": "177.gif",
						alt: "[礼物]"
					}, {
						"url": "178.gif",
						alt: "[抱抱]"
					}, {
						"url": "179.gif",
						alt: "[拇指]"
					}, {
						"url": "180.gif",
						alt: "[贬低]"
					}, {
						"url": "181.gif",
						alt: "[握手]"
					}, {
						"url": "182.gif",
						alt: "[剪刀手]"
					}, {
						"url": "183.gif",
						alt: "[抱拳]"
					}, {
						"url": "184.gif",
						alt: "[勾引]"
					}, {
						"url": "185.gif",
						alt: "[拳头]"
					}, {
						"url": "186.gif",
						alt: "[小拇指]"
					}, {
						"url": "187.gif",
						alt: "[拇指八]"
					}, {
						"url": "188.gif",
						alt: "[食指]"
					}, {
						"url": "189.gif",
						alt: "[ok]"
					}, {
						"url": "190.gif",
						alt: "[情侣]"
					}, {
						"url": "191.gif",
						alt: "[爱心]"
					}, {
						"url": "192.gif",
						alt: "[蹦哒]"
					}, {
						"url": "193.gif",
						alt: "[颤抖]"
					}, {
						"url": "194.gif",
						alt: "[怄气]"
					}, {
						"url": "195.gif",
						alt: "[跳舞]"
					}, ],
					[{
						"url": "196.gif",
						alt: "[发呆]"
					}, {
						"url": "197.gif",
						alt: "[背着]"
					}, {
						"url": "198.gif",
						alt: "[伸手]"
					}, {
						"url": "199.gif",
						alt: "[耍帅]"
					}, {
						"url": "200.png",
						alt: "[微笑]"
					}, {
						"url": "201.png",
						alt: "[生病]"
					}, {
						"url": "202.png",
						alt: "[哭泣]"
					}, {
						"url": "203.png",
						alt: "[吐舌]"
					}, {
						"url": "204.png",
						alt: "[迷糊]"
					}, {
						"url": "205.png",
						alt: "[瞪眼]"
					}, {
						"url": "206.png",
						alt: "[恐怖]"
					}, {
						"url": "207.png",
						alt: "[忧愁]"
					}, {
						"url": "208.png",
						alt: "[眨眉]"
					}, {
						"url": "209.png",
						alt: "[闭眼]"
					}, {
						"url": "210.png",
						alt: "[鄙视]"
					}, {
						"url": "211.png",
						alt: "[阴暗]"
					}, {
						"url": "212.png",
						alt: "[小鬼]"
					}, {
						"url": "213.png",
						alt: "[礼物]"
					}, {
						"url": "214.png",
						alt: "[拜佛]"
					}, {
						"url": "215.png",
						alt: "[力量]"
					}, {
						"url": "216.png",
						alt: "[金钱]"
					}, {
						"url": "217.png",
						alt: "[蛋糕]"
					}, {
						"url": "218.png",
						alt: "[彩带]"
					}, {
						"url": "219.png",
						alt: "[礼物]"
					}]
				],
				//表情图片图床名称
				onlineEmoji: {
					"100.gif": "AbNQgA.gif",
					"101.gif": "AbN3ut.gif",
					"102.gif": "AbNM3d.gif",
					"103.gif": "AbN8DP.gif",
					"104.gif": "AbNljI.gif",
					"105.gif": "AbNtUS.gif",
					"106.gif": "AbNGHf.gif",
					"107.gif": "AbNYE8.gif",
					"108.gif": "AbNaCQ.gif",
					"109.gif": "AbNN4g.gif",
					"110.gif": "AbN0vn.gif",
					"111.gif": "AbNd3j.gif",
					"112.gif": "AbNsbV.gif",
					"113.gif": "AbNwgs.gif",
					"114.gif": "AbNrD0.gif",
					"115.gif": "AbNDuq.gif",
					"116.gif": "AbNg5F.gif",
					"117.gif": "AbN6ET.gif",
					"118.gif": "AbNcUU.gif",
					"119.gif": "AbNRC4.gif",
					"120.gif": "AbNhvR.gif",
					"121.gif": "AbNf29.gif",
					"122.gif": "AbNW8J.gif",
					"123.gif": "AbNob6.gif",
					"124.gif": "AbN5K1.gif",
					"125.gif": "AbNHUO.gif",
					"126.gif": "AbNIDx.gif",
					"127.gif": "AbN7VK.gif",
					"128.gif": "AbNb5D.gif",
					"129.gif": "AbNX2d.gif",
					"130.gif": "AbNLPe.gif",
					"131.gif": "AbNjxA.gif",
					"132.gif": "AbNO8H.gif",
					"133.gif": "AbNxKI.gif",
					"134.gif": "AbNzrt.gif",
					"135.gif": "AbU9Vf.gif",
					"136.gif": "AbUSqP.gif",
					"137.gif": "AbUCa8.gif",
					"138.gif": "AbUkGQ.gif",
					"139.gif": "AbUFPg.gif",
					"140.gif": "AbUPIS.gif",
					"141.gif": "AbUZMn.gif",
					"142.gif": "AbUExs.gif",
					"143.gif": "AbUA2j.gif",
					"144.gif": "AbUMIU.gif",
					"145.gif": "AbUerq.gif",
					"146.gif": "AbUKaT.gif",
					"147.gif": "AbUmq0.gif",
					"148.gif": "AbUuZV.gif",
					"149.gif": "AbUliF.gif",
					"150.gif": "AbU1G4.gif",
					"151.gif": "AbU8z9.gif",
					"152.gif": "AbU3RJ.gif",
					"153.gif": "AbUYs1.gif",
					"154.gif": "AbUJMR.gif",
					"155.gif": "AbUadK.gif",
					"156.gif": "AbUtqx.gif",
					"157.gif": "AbUUZ6.gif",
					"158.gif": "AbUBJe.gif",
					"159.gif": "AbUdIO.gif",
					"160.gif": "AbU0iD.gif",
					"161.gif": "AbUrzd.gif",
					"162.gif": "AbUDRH.gif",
					"163.gif": "AbUyQA.gif",
					"164.gif": "AbUWo8.gif",
					"165.gif": "AbU6sI.gif",
					"166.gif": "AbU2eP.gif",
					"167.gif": "AbUcLt.gif",
					"168.gif": "AbU4Jg.gif",
					"169.gif": "AbURdf.gif",
					"170.gif": "AbUhFS.gif",
					"171.gif": "AbU5WQ.gif",
					"172.gif": "AbULwV.gif",
					"173.gif": "AbUIzj.gif",
					"174.gif": "AbUTQs.gif",
					"175.gif": "AbU7yn.gif",
					"176.gif": "AbUqe0.gif",
					"177.gif": "AbUHLq.gif",
					"178.gif": "AbUOoT.gif",
					"179.gif": "AbUvYF.gif",
					"180.gif": "AbUjFU.gif",
					"181.gif": "AbaSSJ.gif",
					"182.gif": "AbUxW4.gif",
					"183.gif": "AbaCO1.gif",
					"184.gif": "Abapl9.gif",
					"185.gif": "Aba9yR.gif",
					"186.gif": "AbaFw6.gif",
					"187.gif": "Abaiex.gif",
					"188.gif": "AbakTK.gif",
					"189.gif": "AbaZfe.png",
					"190.gif": "AbaEFO.gif",
					"191.gif": "AbaVYD.gif",
					"192.gif": "AbamSH.gif",
					"193.gif": "AbaKOI.gif",
					"194.gif": "Abanld.gif",
					"195.gif": "Abau6A.gif",
					"196.gif": "AbaQmt.gif",
					"197.gif": "Abal0P.gif",
					"198.gif": "AbatpQ.gif",
					"199.gif": "Aba1Tf.gif",
					"200.png": "Aba8k8.png",
					"201.png": "AbaGtS.png",
					"202.png": "AbaJfg.png",
					"203.png": "AbaNlj.png",
					"204.png": "Abawmq.png",
					"205.png": "AbaU6s.png",
					"206.png": "AbaaXn.png",
					"207.png": "Aba000.png",
					"208.png": "AbarkT.png",
					"209.png": "AbastU.png",
					"210.png": "AbaB7V.png",
					"211.png": "Abafn1.png",
					"212.png": "Abacp4.png",
					"213.png": "AbayhF.png",
					"214.png": "Abag1J.png",
					"215.png": "Aba2c9.png",
					"216.png": "AbaRXR.png",
					"217.png": "Aba476.png",
					"218.png": "Abah0x.png",
					"219.png": "Abdg58.png"
				},
			};
		},
		components: {
			userPopup: userPopup,
			unLockPopup: unLockPopup,
			wechatPopup: wechatPopup,
			authentication: authentication
		},
		onBackPress() {
			if (this.showUnLock || this.showWechat || this.showAction || this.showUser || this.showAuth || this.showImprove) {
				if (this.showUser) {
					console.log(this.showUser);
					if (this.$refs.userRef.backPress()) {
						this.showUser = false
					}
				} else if (this.showUnLock) {
					if (this.$refs.lockRef.showVip || this.$refs.lockRef.showModal) {
						this.$refs.lockRef.showVip = false
						this.$refs.lockRef.showModal = false
					} else {
						this.showUnLock = false
					}
				} else {
					this.showWechat = false
					this.showAuth = false
					this.showImprove = false
					this.showAction = false
				}
				return true
			}
		},
		onLoad(option) {
			// 注册键盘高度变化监听
			uni.onKeyboardHeightChange(res => {
				this.handleKeyboardHeightChange(res.height)
			});
			this.to_user_id = option.user_id
			this.msgList = uni.getStorageSync('msgList_' + this.to_user_id) || [{
				datetime:'正在加载...',
				data: []
			}]
			if (option.session_id) {
				this.session_id = option.session_id
			}
			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
			uni.$on('message', this.getMessage)
			uni.$on('connect-success', this.connectSuccess)
		},
		onShow() {
			if (this.to_user_id) {
				this.getUserHome()
				this.getUserInfo()
			}
		},
		watch: {
			msgList(val) {
				if (this.to_user_id) {
					uni.setStorageSync('msgList_' + this.to_user_id, val)
				}
			}
		},
		// 页面卸载时取消监听
		onUnload() {
			uni.$off('message', this.getMessage)
			uni.$off('connect-success', this.connectSuccess)
			// 取消监听键盘事件
			uni.offKeyboardHeightChange(this.handleKeyboardHeightChange);
		},
		methods: {
			handleKeyboardHeightChange(res) {
				const height = res;
				if (height > 0) {
					this.isShowKeyBoard = true;
					this.$nextTick(() => {
						this.$refs.paging.scrollToBottom(true)
					})
					console.log('键盘弹起，高度为:', height + 'px');
					// 这里可以触发页面布局调整逻辑（例如：滚动输入框到可视区域）
				} else {
					this.isShowKeyBoard = false;
					console.log('键盘收回');
					// 恢复页面布局
				}
			},
			completeInfo() {
				this.showImprove = false
				uni.navigateTo({
					url: '/pages/mine/add-contact'
				})
			},
			//关注成功
			followSuccess() {
				this.getUserInfo()
				this.getUserHome()
			},
			//提交认证
			authSuccess() {
				this.showAuth = false
				this.$Tips('/pages/authentication/authentication')
			},
			queryList() {
				if (this.msgInfo.next_page != 'done') {
					this.sendMessage({
						c: "Message",
						a: "chat_record",
						data: {
							session_id: this.session_id,
							page: this.msgInfo.next_page
						}
					})
				} else {
					if (this.$refs.paging) {
						this.$refs.paging.complete(this.msgList)
					}
				}
			},
			sendMessage(param) {
				if (app.globalData.socketObj) {
					app.globalData.socketObj.sendMsg(param)
				}
			},
			scrollTo(type, id) {
				if (this.$refs.paging) {
					if (type == 1) {
						this.$nextTick(() => {
							this.$refs.paging.scrollToBottom(true)
						})
					} else {
						this.$refs.paging.scrollIntoViewById('msg' + id, 100, false)
					}
				}
			},
			// 接收到消息的回调
			getMessage(msg) {
				let messageData = JSON.parse(msg.data)
				if (messageData.msgtype == "new_message") {
					this.sendMessage({
						c: "Message",
						a: "read_message",
						data: {
							record_id: messageData.data.record_id,
						}
					})
					this.msgList[0].data.push(messageData.data);
					this.scrollTo(1)
				}
				if (messageData.msgtype == "chat_record") {
					this.msgInfo = messageData.data
					let msgList = []
					msgList = messageData.data.chat_record
					for (var i = 0; i < msgList.length; i++) {
						msgList[i].data = msgList[i].data.reverse()
					}
					if (this.msgInfo.page == 1) {
						this.msgList = msgList
						this.scrollTo(1)
					} else {
						for (let i = 0; i < msgList.length; i++) {
							this.msgList.unshift(msgList[i]);
						}
						let lastid = this.msgList[0].data[this.msgList[0].data.length - 1].id;
						this.scrollTo(2, lastid)
					}
					if (this.$refs.paging) {
						this.$refs.paging.complete(this.msgList);
					}
					if (this.to_user_id == 3) {
						this.toUserInfo = this.msgInfo.session_info
						this.toUserInfo.is_unlock = true
					}
				}
				if (messageData.msgtype == "send_message") {
					this.scrollTo(1)
				}
				if (messageData.msgtype == "add_session") {
					this.session_id = messageData.data.id
					this.getMsgList();
				}
			},
			connectSuccess() {
				this.getMsgList();
			},
			//返回
			navigatorBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getUserInfoWx() {
				this.$Api['user'].getUserInfoWx({
					from_user_id: this.to_user_id,
				}).then(res => {
					this.userWechat = res.data.wechat
					this.showWechat = true
				}).finally(() => {
					uni.hideLoading()
				})
			},
			lookWechat() {
				uni.showLoading({
					title: '加载中'
				})
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.getUserInfoWx()
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(this.to_user_id)
					} else {
						this.showUnLock = true
						setTimeout(() => {
							uni.hideLoading()
						}, 200)
					}
				}
			},
			confirmUserUnLock(user_id) {
				this.$Api['user'].subUserUnLock({
					to_user_id: user_id,
					type: '1'
				}).then(res => {
					this.unLockSuccess(user_id)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			selectAction(e) {
				if (e.name == '拉黑') {
					this.$Api['user'].editBlackUser({
						session_user_id: this.to_user_id,
					}).then(res => {
						this.$Toast('加入黑名单成功')
					})
				}
				if (e.name == '关注' || e.name == '取消关注') {
					this.friendsFollow()
				}
				if (e.name == '举报') {
					this.$Tips('/pages/report/report?user_id=' + this.to_user_id)
				}
			},
			//用户关注
			friendsFollow() {
				this.$Api['user'].friendsFollow({
					user_id: this.to_user_id
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.getUserHome()
				})
			},
			unLockSuccess(id) {
				this.showUnLock = false
				this.getUserHome()
				this.getUserInfo()
				// this.getUserInfoWx()
			},
			getInitialize() {
				this.$Api['user'].getInitialize({
					modulename: this.userInfo.username
				}).then(res => {
					this.chartConfig = res.data
					// 如果已经有sockt实例
					if (app.globalData.socketObj) {
						// 如果sockt实例未连接
						if (!app.globalData.socketObj.isConnect) {
							app.globalData.socketObj.initSocket()
						}
					} else {
						// 如果没有sockt实例，则创建
						app.globalData.socketObj = new WebSocketClass(HTTP_WSS_URL + `/?modulename=${this.chartConfig.user_info.username}&token=${this.chartConfig.token_list.fastchat_token}&fastchat_user=`, 10)
						app.globalData.socketObj.initSocket()
					}
					if (app.globalData.socketObj.isConnect) {
						this.getMsgList();
					}
				})
			},
			getUserHome() {
				if (this.to_user_id != 3) {
					this.$Api['user'].getUserHome({
						user_id: this.to_user_id
					}).then(res => {
						this.toUserInfo = res.data
						if (this.toUserInfo.is_focus_count) {
							this.actionList[0].name = '取消关注'
						} else {
							this.actionList[0].name = '关注'
						}
					})
				}
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
					this.getInitialize()
				})
			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				// 用户消息
				switch (msg.msg.type) {
					case 'text':
						this.addTextMsg(msg);
						break;
					case 'voice':
						this.addVoiceMsg(msg);
						break;
					case 'img':
						this.addImgMsg(msg);
						break;
				}
				console.log('用户消息');
			},
			// 加载初始页面消息
			getMsgList() {
				if (this.session_id) {
					// 消息列表
					this.sendMessage({
						c: "Message",
						a: "chat_record",
						data: {
							session_id: this.session_id,
							page: 1
						}
					})
				} else {
					this.sendMessage({
						"c": "Message",
						"a": "add_session",
						"data": {
							"user_id": this.to_user_id + "||user"
						}
					})
				}
			},
			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			// 发送文字消息
			sendText() {
				this.hideDrawer(); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.addTextMsg(content);
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(this.to_user_id)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.addTextMsg(content);
					}
				}
				this.textMsg = ''; //清空输入框
			},
			//卡片
			chooseCard() {
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.sendCard();
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(this.to_user_id)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.sendCard();
					}
				}
			},
			sendCard() {
				console.log(this.userInfo.wechat, 9999)
				if (!this.userInfo.wechat) {
					this.showImprove = true
					this.hideDrawer();
					return false
				}
				let lastid = 0
				if (this.msgList[this.msgList.length - 1].data.length) {
					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data.length - 1].id;
					lastid++;
				}
				this.msgList[this.msgList.length - 1].data.push({
					id: lastid,
					sender: 'me',
					msg_type: '3',
					message: this.userInfo.wechat,
				})
				this.sendMessage({
					c: "Message",
					a: "send_message",
					data: {
						message: this.userInfo.wechat,
						msg_type: '3',
						session_id: this.session_id
					}
				})
				this.hideDrawer();
			},
			// 选择图片发送
			chooseImage() {
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.getImage('album');
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(this.to_user_id)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.getImage('album');
					}
				}
			},
			//拍照发送
			camera() {
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.getImage('camera');
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(this.to_user_id)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.getImage('camera');
					}
				}
			},
			//选照片 or 拍照
			getImage(type) {
				this.hideDrawer();
				uni.chooseImage({
					sourceType: [type],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: async (image) => {
									console.log(image.width);
									console.log(image.height);
									const result = await this.$uploadFilePromise(res.tempFilePaths[i])
									if (result) {
										let msg = {
											url: result.fullurl,
											w: image.width,
											h: image.height
										};
										this.addImgMsg(msg);
									}
								}
							});
						}
					}
				});
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log("item: " + item);
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
								let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
								console.log("imgstr: " + imgstr);
								return imgstr;
							}
						}
					}
				});
				// return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
				return replacedStr;
			},
			// 添加文字消息到列表
			addTextMsg(msg) {
				let lastid = 0
				if (this.msgList[this.msgList.length - 1].data.length) {
					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data.length - 1].id;
					lastid++;
				}
				this.msgList[this.msgList.length - 1].data.push({
					id: lastid,
					sender: 'me',
					msg_type: '1',
					message: msg
				})
				this.scrollTo(1)
				this.sendMessage({
					c: "Message",
					a: "send_message",
					data: {
						message: msg,
						msg_type: '1',
						session_id: this.session_id
					}
				})
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				this.msgList.push(msg);
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				let content = this.setPicSize(msg);
				// this.msgImgList.push(msg.msg.content.url);
				let lastid = 0
				if (this.msgList[this.msgList.length - 1].data.length > 0) {
					lastid = this.msgList[this.msgList.length - 1].data[this.msgList[this.msgList.length - 1].data.length - 1].id;
					lastid++;
				}
				// let imgStr = `<img src="${msg.url}" style="width:${content.w}px; height:${content.h}px;">`;
				this.msgList[this.msgList.length - 1].data.push({
					id: lastid,
					sender: 'me',
					msg_type: '2',
					message: msg.url
				})
				this.sendMessage({
					c: "Message",
					a: "send_message",
					data: {
						message: msg.url,
						msg_type: '2',
						session_id: this.session_id
					}
				})
			},
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: "none",
					urls: [url]
				});
			},
			// 播放语音
			playVoice(msg) {
				this.playMsgid = msg.id;
				this.AUDIO.src = msg.content.url;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					// this.sendMsg(msg, 'voice');
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			},
			focusTextarea(e) {
				console.log(e);
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
				this.inputBottom = e.detail.height;
				this.scrollTop += 1; //滚到底部
			},
			blurTextarea(e) {
				console.log(e);
				this.inputBottom = 0;
				this.scrollTop += 1; //滚到底部
			},
		},
	};
</script>
<style lang="scss">
	@import "@/static/HM-chat/css/style.scss";

	.container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding-bottom: 52px;
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			flex-shrink: 0;

			.pageBg {
				position: absolute;
				top: 0;
				width: 100%;
				/* #ifdef H5 */
				height: 120rpx;
				/* #endif */
				/* #ifndef H5 */
				height: 180rpx;
				/* #endif */
			}

			.waring-text {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				background-color: #FFE9FC;
				font-size: 24rpx;
				color: #F169F6;
			}

			.nav-box {
				padding: 20rpx;
				position: relative;
				z-index: 10;
				display: flex;
				justify-content: space-between;
				align-content: center;
				font-size: 28rpx;
				color: #323334;

				.nav-left,
				.nav-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 32rpx;

					.arrow-left {
						width: 24rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}

					.unlock {
						width: 148rpx;
						height: 58rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #28C445;
						border-radius: 44rpx;
						font-size: 30rpx;
						color: #FFFFFF;

						.icon_wx {
							width: 38rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
					}

					.more {
						width: 12rpx;
						height: 40rpx;
						margin-left: 42rpx;
					}

					.user-box {
						display: flex;
						align-items: center;

						.user-avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						.user-info {
							font-size: 24rpx;
							color: #9A9A9A;

							.name {
								font-weight: bold;
								font-size: 28rpx;
								color: #323334;
							}

							.detail {
								margin-top: 10rpx;
								letter-spacing: 4rpx;
							}
						}
					}
				}
			}
		}

		.content {
			flex-grow: 1;
			overflow: auto;

			.message {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.message-content {
					width: auto;
					max-width: calc(100vw - 80rpx);
					word-wrap: break-word;
					box-sizing: border-box;
					padding: 32rpx;
					line-height: 48rpx;
					background: pink;
					border-radius: 16rpx 0px 16rpx 16rpx;
				}

				.message-time {
					line-height: 32rpx;
					margin-top: 16rpx;
				}
			}
		}
	}

	.popup-close {
		position: absolute;
		right: 0;
		top: -120rpx;
		width: 88rpx;
		height: 88rpx;
	}

	.popup-image {
		margin-top: 60rpx;
		width: 412rpx;
		height: 316rpx;
	}

	.popup-title {
		font-weight: 600;
		font-size: 34rpx;
		color: #323334;
		text-align: center;
	}

	.popup-tips {
		margin-top: 18rpx;
		font-size: 28rpx;
		color: #9A9A9A;
	}

	.button-group {
		margin-top: 68rpx;

		.title {
			display: block;
			color: #ffffff;
			text-decoration: none;
		}

		.button1 {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			width: 600rpx;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
			border-radius: 44rpx;
		}
	}

	.bottom-textarea {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;

		.textarea-container {
			flex: 1;
			margin-left: 20rpx;

			>textarea {
				font-size: 36rpx;
				color: rgba(8, 8, 8, 1);
				width: auto;
			}
		}
	}
</style>